﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义分页栏样式 */
        .layui-laypage {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

            .layui-laypage a,
            .layui-laypage span {
                margin: 0 5px;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border: 1px solid #e2e2e2;
                border-radius: 3px;
                cursor: pointer;
            }

                .layui-laypage a:hover {
                    color: #009688;
                }

            .layui-laypage.layui-laypage-curr {
                background-color: #009688;
                color: #fff;
            }

        /* 新增的查询条件样式 */
        .layui-btn-container {
            display: flex;
            align-items: center;
        }

            .layui-btn-container input {
                margin-right: 10px;
            }

        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
            <input type="text" style="width:230px;height:40px" name="doctorName" placeholder="请输入医生名称"
                class="layui-input">
            <button class="layui-btn layui-btn-sm" lay-event="search">查询</button>
            <button class="layui-btn layui-btn-sm" lay-event="reset">重置</button>
        </div>
    </script>

    <script type="text/html" id="toolDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="imageTpl">
        <img src="{{d.doctorImage}}" alt="医生头像" style="max-width: 100px; max-height: 100px;">
    </script>

    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'jquery'], function () {
            var table = layui.table,
                layer = layui.layer,
                $ = layui.jquery;

            // 表格渲染
            table.render({
                elem: '#test',
                url: '@ViewBag.BaseUrl/T5/Doctor/GetDoctor',
                page: true,
                request: { pageName: 'pageIndex', limitName: 'pageSize' },
                limit: 8,
                limits: [5, 10, 15],
                toolbar: '#toolbarDemo',
                cellMinWidth: 80,
                totalRow: false,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'doctorId', fixed: 'left', width: 100, title: 'ID', sort: true },
                    { field: 'doctorName', width: 160, title: '医生名称' },
                    { field: 'doctorImage', width: 160, title: '医生头像', templet: '#imageTpl' },
                    { field: 'campusName', width: 160, title: '院区' },
                    { field: 'jobName', width: 160, title: '职称' },
                    { field: 'deparName', width: 160, title: '科室' },
                    { field: 'doctorlabel', width: 160, title: '标签' },
                    { field: 'doctorintroduc', width: 250, title: '医生简介' },
                    { fixed: 'right', title: '操作', width: 180, minWidth: 125, templet: '#toolDemo' }
                ]],
                done: function (res, curr, count) {
                    // 修复下拉菜单重复渲染问题（原代码存在多个dropdown.render，这里根据需求保留必要功能）
                }
            });


             
            // 工具栏事件
            table.on('toolbar(test)', function (obj) {
                if (obj.event === 'getCheckData') {
                    var checkStatus = table.checkStatus(obj.config.id);
                    layer.alert(JSON.stringify(checkStatus.data, null, 2));
                } else if (obj.event === 'search') {
                    var doctorName = $('[name="doctorName"]').val();
                    table.reload('test', {
                        where: { doctorName: doctorName },
                        page: {
                            curr: 1 // 重置到第一页
                        }
                    });
                } else if (obj.event === 'reset') {
                    $('[name="doctorName"]').val('');
                    table.reload('test', {
                        where: { doctorName: '' },
                        page: {
                            curr: 1 // 重置到第一页
                        }
                    });
                }
            });

            // 行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm(`确定要删除医生 ${data.doctorName} 的信息吗？`, {
                        btn: ['确定', '取消']
                    }, function () {
                        // 显示加载提示
                        var loadingIndex = layer.load(1, {
                            shade: [0.1, '#fff']
                        });
                        // 调用删除接口，使用主键查询删除
                        $.ajax({
                            url: `@ViewBag.BaseUrl/T6/Doctor/DelDoctor?DoctorId=${data.doctorId}`,
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({ doctorId: data.doctorId }),
                            success: function (res) {
                                // 关闭加载提示
                                layer.close(loadingIndex);
                                if (res.code === 100) {
                                    layer.msg('删除成功', { icon: 1 });
                                    // 重新加载表格数据
                                    table.reload('test');
                                } else {
                                    layer.msg(res.msg || '删除失败，请稍后重试', { icon: 2 });
                                }
                            },
                            error: function (error) {
                                // 关闭加载提示
                                layer.close(loadingIndex);
                                console.log('删除请求错误:', error);
                                console.log('状态码:', error.status);
                                console.log('错误信息:', error.statusText);
                                layer.msg('网络错误，请稍后重试', { icon: 2 });
                            }
                        });
                    }, function () {
                        layer.closeAll();
                    });
                } else if (obj.event === 'edit') {
                    // 构建携带数据的 URL
                    let queryString = Object.keys(data).map(key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`).join('&');
                    let url = `UpdateDoctor?${queryString}`;
                    // 跳转页面
                    window.location.href = url;
                }
            });

            // 优化后的分页处理（移除冗余的reload调用，Layui自动处理分页）
            table.on('page(test)', function (obj) {
                console.log('当前页：', obj.curr, '每页数量：', obj.limit);
            });

            // 移除冗余的dropdown和行模式代码（根据需求保留核心功能）
        });
    </script>
</body>

</html>
